<template>
  <div class="detail_parameter">
    <section class="detail_parameter-header">
      <h3 class="detail_parameter-header-title">{{title}}</h3>
      <el-image
        class="detail_parameter-header-image"
        :src="utils.setCdnUrl() + image"
        fit="fill">
      </el-image>
    </section>
    <section class="detail_parameter-content">
      <div class="collapse">
        <template v-for="(item, i) in data">
          <div class="collapse-item" :key="i" :class="{'expanded': activeNames.includes(i)}">
            <h3 class="title" v-transition="{transform: 'translateY(50px)', delay: '.2s'}">{{item[0].first_title}}</h3>
            <!-- <div class="content" v-show="!activeNames.includes(i)"> -->
            <div class="content" :class="'content' + i">
              <div v-for="val in item" :key="val.id" class="item" v-transition="{transform: 'translateY(50px)', delay: '.2s'}">
                <p class="item-title">{{val.second_title}}</p>
                <p>{{val.document}}</p>
                <img class="collapse-item-image" v-if="val.image" :src="utils.setCdnUrl() + val.image">
              </div>
            </div>
            <div class="collapse-item-action" v-transition="{transform: 'translateY(50px)', delay: '.2s'}">
              <div class="arrow" :class="{'open': !activeNames.includes(i)}" @click="clickArrow(i)"><i class="iconfont icon-Top_normal2" style="font-size: 18px"></i></div>
            </div>
          </div>
          <div :key="item.id" v-transition="{transform: 'translateY(50px)', delay: '.2s'}">
            <el-divider></el-divider>
          </div>
        </template>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    image: String,
    data: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      activeNames: []
    }
  },
  methods: {
    handleChange(val) {
      console.log(val);
    },
    clickArrow(i) {
      let classname = '.content' + i
      let el = document.querySelector(classname)
      if(!this[classname]) {
        el.style.height = el.clientHeight + 'px'
        this[classname] = el.clientHeight
      }
      if(el.clientHeight === 0) {
        el.style.height = this[classname] + 'px'
        el.style.opacity = 1
      } else {
        el.style.height = '0px'
        el.style.opacity = 0
      }
      
      if(this.activeNames.includes(i)) {
        this.activeNames = this.activeNames.filter(val => val !== i)
      } else {
        this.activeNames = [...this.activeNames, i]
      }
    }
  }
}
</script>
<style>
.rampow_content {
  overflow-x: hidden;
}
</style>

<style lang="scss" scoped>
  .detail_parameter {
    width: 100%;
    overflow-x: hidden;
    padding-top: 136px;
  }
  .detail_parameter-header {
    display: flex;
    flex-direction: column;
    // justify-content: center;
    align-items: center;
    width: 1200px;
    margin: 0 auto;
  }
  .detail_parameter-header-title {
    margin: 56px 0 24px;
    font-size: 32px;
    color: #191919;
    line-height: 40px;
    text-align: center;
  }
  .detail_parameter-header-image {
    width: 400px;
    height: 400px;
  }
  .detail_parameter-content {
    width: 1200px;
    margin: 56px auto 56px;

    /deep/ .el-divider--horizontal {
      margin: 0;
    }
    .collapse {
      width: 100%;
      overflow: hidden;
    }
    
    .collapse-item {
      position: relative;
      display: flex;
      padding: 56px 0;
      // border-bottom: 1px solid #EAEAEA;
      transition: all .5s;
      // overflow: hidden;

      &:first-child {
        border-top: 1px solid #EAEAEA;
      }

      .title {
        width: 304px;
        flex-shrink: 0;
        font-size: 24px;
        color: #191919;
      }

      .content {
        font-size: 16px;
        line-height: 24px;
        color: #6D6D6D;
        margin-top: 0;
        transition: all .5s;
        padding-right: 20px;

        .item + .item {
          margin-top: 40px;
        }

        .item-title {
          font-weight: bold;
          color: #191919;
          margin-bottom: 2px;
        }

        .collapse-item-image {
          margin-top: 16px;
          max-width: 100%;
        }
      }
      .collapse-item-action {
        position: absolute;
        right: 0;
      }
      .arrow {
        transform: rotate(180deg);
        transition: transform .3s;
        cursor: pointer;
      }
      .open {
        transform: rotate(0deg);
      }
    }
    // .collapse-item.expanded {
    //   .content {
    //     height: 0;
    //   }
    // }
  }
  @media screen and (max-width: 768px) {
    .detail_parameter {
      padding-top: 136px;
    }
    .detail_parameter-header {
      width: 100%;
    }
    .detail_parameter-header-title {
      font-size: 20px;
      margin: 20px 0 16px;
      line-height: 1.4em;
      text-align: center;
    }
    .detail_parameter-header-image {
      width: 168px;
      height: 168px;
    }
    .detail_parameter-content {
      padding: 0 20px;
      width: 100%;
      margin-top: 24px;

      .collapse-item {
        flex-direction: column;
        padding: 24px 0;

        .title {
          font-size: 16px;
        }

        .content {
          font-size: 14px;
          line-height: 22px;
          color: #6D6D6D;
          padding-right: 0;

          .item + .item {
            margin-top: 24px;
          }

          .item-title {
            font-size: 14px;
            font-weight: bold;
            margin-top: 24px;
            margin-bottom: 2px;
          }

          .collapse-item-image {
            margin-top: 12px;
            max-width: 100%;
          }
        }
      }
    }
  }
</style>